<!--
 * @Author: 施伟略
 * @Date: 2020-06-28 17:20:18
 * @LastEditTime: 2020-07-06 15:07:27
 * @LastEditors: Please set LastEditors
 * @Description: 帮助中心
 * @FilePath: \jkShop\shop\src\pages\user\components\helpZx.vue
--> 
<template>
  <div class="help">
    <!-- 顶部导航 -->
    <van-nav-bar title="帮助中心" left-text="返回" left-arrow @click-left="onClickLeft" />
    <!-- 搜索 -->
    <van-search background="#f4f4f4" v-model="value" placeholder="输入问题关键词" @search="onSearch" />
    <!-- 留言客服问题咨询 -->
    <van-grid style="margin-bottom:18px;">
      <van-grid-item icon="records" text="在线留言" to='/service' />
      <van-grid-item icon="service-o" text="电话客服" to='/service' />
      <van-grid-item icon="description" text="全部问题" to='/allQuestions' />
      <van-grid-item icon="qr" text="公众号咨询" to='/wechatAppletCode' />
    </van-grid>
    <!-- 订单售后物流会员 -->
    <div class="total">
      <div class="left">
        <div class="l-content" v-for="items of datas" :key="items.id">
          <router-link :to="{path:'/classificationProblem',query:{id:items.id,name:items.name}}">
            <div class="img1">
              <van-image :src="items.icon">
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
              </van-image>
            </div>
            <div class="name">{{items.name}}</div>
          </router-link>
        </div>
      </div>
      <div class="right">
        <!-- 订单相关 -->
        <div class="r-content" v-if="specify1">
          <div class="right-1">
            <div class="prev" @click="onClick">{{specify1[0].title + '>'}}</div>
            <div @click="onClick2">{{specify1[1].title + '>'}}</div>
          </div>
          <div class="right-2">
            <div @click="onClick3">{{specify1[2].title + '>'}}</div>
            <div class="last">订单能开发票吗></div>
          </div>
        </div>
        <!-- 售后问题 -->
        <div class="r-content" v-if="specify2">
          <div class="right-1">
            <div class="prev" @click="onClick4">{{specify2[0].title + ">"}}</div>
            <div @click="onClick5">{{specify2[1].title + ">"}}</div>
          </div>
          <div class="right-2">
            <div @click="onClick6">{{specify2[2].title + ">"}}</div>
            <div class="last" @click="onClick7">{{specify2[3].title + ">"}}</div>
          </div>
        </div>
        <!-- 物流问题 -->
        <div class="r-content" v-if="specify3">
          <div class="right-1">
            <div class="prev">催促发货></div>
            <div @click="onClick8">{{specify3[0].title + ">"}}</div>
          </div>
          <div class="right-2">
            <div>香港UE能否包邮></div>
            <div class="last" @click="onClick9">{{specify3[1].title + ">"}}</div>
          </div>
        </div>
        <!-- 会员中心 -->
        <div class="r-content">
          <div class="right-1">
            <div class="prev">购买会员></div>
            <div>购买会员有什么特权></div>
          </div>
          <div class="right-2">
            <div>零元免费领取会员></div>
            <div class="last">申请退卡></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as api from "@/api/apiList/help/help.js";
import { Toast } from "vant"
export default {
  data() {
    return {
      value:'', //搜索关键字
      datas: [],
      specify1: "",
      specify2: "",
      specify3: "",
      // specify4: ""
    };
  },
  methods: {
    // 返回上一页
    onClickLeft() {
      this.$router.go(-1);
    },
    // 回车键触发搜索
    onSearch() {
      if(this.value === '' || this.value == null){
        Toast('请输入关键字再搜索！')
      }else{
        this.$router.push({path:'/searchResults',query:{val:this.value}})
      }
    },

    // 点击路由跳转问题详情页
    onClick(){
      this.$router.push({path:'/questionDetails',query:{id:this.specify1[0].id}})
    },
    onClick2(){
      this.$router.push({path:'/questionDetails',query:{id:this.specify1[1].id}})
    },
    onClick3(){
      this.$router.push({path:'/questionDetails',query:{id:this.specify1[2].id}})
    },
    onClick4(){
      this.$router.push({path:'/questionDetails',query:{id:this.specify2[0].id}})
    },
    onClick5(){
      this.$router.push({path:'/questionDetails',query:{id:this.specify2[1].id}})
    },
    onClick6(){
      this.$router.push({path:'/questionDetails',query:{id:this.specify2[2].id}})
    },
    onClick7(){
      this.$router.push({path:'/questionDetails',query:{id:this.specify2[3].id}})
    },
    onClick8(){
      this.$router.push({path:'/questionDetails',query:{id:this.specify3[0].id}})
    },
    onClick9(){
      this.$router.push({path:'/questionDetails',query:{id:this.specify3[1].id}})
    },

    // 异步获取帮助中心分类数据数据
    async API_getHelpCategory(page = 1, limit = 10) {
      let result = {
        page,
        limit
      };
      return await api.help_category(result);
    }
  },
  async created() {
    let res = await this.API_getHelpCategory();
    // console.log(res)
    this.datas = res.data;
    this.specify1 = res.data[0].specify;
    this.specify2 = res.data[1].specify;
    this.specify3 = res.data[2].specify;
    // this.specify4 = res.data[3].specify;
    // console.log(this.datas);
    // console.log(this.specify1);
    // console.log(this.specify2);
    // console.log(this.specify3);
    // console.log(this.specify4);
  }
};
</script>

<style lang="scss" scoped>
@import "@/style/help/help.scss"
</style>